<template>
  <div class="hello">
    <div><i>{{$t("name")}}</i></div>
    <div><i>{{receiverBank}}</i></div>
    <div> ---》》  <i v-html='$t("receiver_account_no")'></i></div>
    <strong @click="changeLang('en')">英文</strong>
    <strong @click="changeLang('zh')">中文</strong>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed: {
    receiverBank () {
      return this.$t("receiver_bank")
    }
  },
  methods: {
    // 切换语言
    changeLang (lang) {
      // const _this = this
      console.log(this.$i18n.locale)
      this.$i18n.locale = lang
      localStorage.setItem('lang', lang)
      console.log(this.$i18n.locale)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
